<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">

<title>运维管理平台</title>

<!-- jQuery -->
<script src="/static/vendor/jquery/jquery.min.js"></script>

<!-- Bootstrap Core CSS -->
<link href="/static/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

<!-- MetisMenu CSS -->
<link href="/static/vendor/metisMenu/metisMenu.min.css" rel="stylesheet">

<!-- Custom CSS -->
<link href="/static/dist/css/sb-admin-2.css" rel="stylesheet">

<!-- Morris Charts CSS -->
<link href="/static/vendor/morrisjs/morris.css" rel="stylesheet">

<!-- Custom Fonts -->
<link href="/static/vendor/font-awesome/css/font-awesome.min.css"
	rel="stylesheet" type="text/css">

<!-- Multiselect CSS -->
<link rel="stylesheet" href="/static/dist/css/bootstrap-select.css"
	type="text/css" />

<!-- Bootstrap Core JavaScript -->
<script src="/static/vendor/bootstrap/js/bootstrap.min.js"></script>

<!-- Metis Menu Plugin JavaScript -->
<script src="/static/vendor/metisMenu/metisMenu.min.js"></script>

<!-- Morris Charts JavaScript -->
<script src="/static/vendor/raphael/raphael.min.js"></script>
<script src="/static/vendor/morrisjs/morris.min.js"></script>

<!-- Custom Theme JavaScript -->
<script src="/static/dist/js/sb-admin-2.js"></script>

<!-- Flot Charts JavaScript -->
<script src="/static/vendor/flot/excanvas.min.js"></script>
<script src="/static/vendor/flot/jquery.flot.js"></script>
<script src="/static/vendor/flot/jquery.flot.pie.js"></script>
<script src="/static/vendor/flot/jquery.flot.resize.js"></script>
<script src="/static/vendor/flot/jquery.flot.time.js"></script>
<script src="/static/vendor/flot-tooltip/jquery.flot.tooltip.min.js"></script>


<!--    弹窗开始样式 -->
<script src="/static/dist/js/xcConfirm.js" type="text/javascript"
	charset="utf-8"></script>
<link rel="stylesheet" type="text/css"
	href="/static/dist/css/xcConfirm.css" />
<!--   csrf -->
<script src="/static/js/csrf.js"></script>

<!-- Multiselect JavaScript -->
<script type="text/javascript" src="/static/dist/js/bootstrap-select.js"></script>

<!-- Echat JavaScript -->
<script type="text/javascript" src="/static/js/echarts.js"></script>


<!-- Datetimepicker -->
<link rel="stylesheet"
	href="/static/dist/css/bootstrap-datetimepicker.min.css"
	type="text/css" />
<script type="text/javascript"
	src="/static/js/bootstrap-datetimepicker.js"></script>
{% block ace-content %} {% endblock %}
<!-- DataTables JavaScript -->
<link rel="stylesheet" href="/static/dist/css/jquery.dataTables.min.css">
<script src="/static/js/jquery.dataTables.min.js"></script>
<style type="text/css">
	pre {
		overflow: auto;
		white-space: normal;
		white-space: pre-wrap; /* css-3 */
		white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
		white-space: -pre-wrap; /* Opera 4-6 */
		white-space: -o-pre-wrap; /* Opera 7 */
		word-wrap: break-word; /* Internet Explorer 5.5+ */
		border: 1px solid #ccc;
		padding: 5px;
		margin: 10px;
		font-family: Consolas, monospace;
		color: #ADFF2F;
		background-color: #000000;
	}
  .dropdown-menu {
		max-height: 500px;
		overflow-y: auto;
		overflow-x: hidden;
	} 
</style>

</head>

<body>

	<div id="wrapper">

		<!-- Navigation -->
		<nav class="navbar navbar-default navbar-static-top" role="navigation"
			style="margin-bottom: 0">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle" data-toggle="collapse"
					data-target=".navbar-collapse">
					<span class="sr-only">Toggle navigation</span> <span
						class="icon-bar"></span> <span class="icon-bar"></span> <span
						class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="/">OpsManage v2.0</a>
			</div>
			<!-- /.navbar-header -->

			<ul class="nav navbar-top-links navbar-right">
				<li class="dropdown"><a class="dropdown-toggle"
					data-toggle="dropdown" href="#"> <i class="fa fa-bell fa-fw">
					</i><span class="badge" id="deploy_order_count"></span> <i
						class="fa fa-caret-down"></i>

				</a>
					<ul class="dropdown-menu dropdown-messages" id="deploy_order">
					</ul> <!-- /.dropdown-messages --></li>
				<!-- /.dropdown -->
				<li class="dropdown"><a class="dropdown-toggle"
					data-toggle="dropdown" href="#"> {{user}} <i
						class="fa fa-user fa-fw"></i>
					<iclass ="fafa-caret-down">
						</i></a>
					<ul class="dropdown-menu dropdown-user">
						<li><a href="/user/center/"><i class="fa fa-user fa-fw"></i>
								User Profile</a></li>
						<li><a href="#"><i class="fa fa-gear fa-fw"></i> Settings</a>
						</li>
						<li class="divider"></li>
						<li><a href="/logout"><i class="fa fa-sign-out fa-fw"></i>
								Logout</a></li>
					</ul> <!-- /.dropdown-user --></li>
				<!-- /.dropdown -->
			</ul>
			<!-- /.navbar-top-links -->

			<div class="navbar-default sidebar" role="navigation">
				<div class="sidebar-nav navbar-collapse">
					<ul class="nav" id="side-menu">
						<li class="sidebar-search">
							<div class="input-group custom-search-form">
								<input type="text" class="form-control" placeholder="Search...">
								<span class="input-group-btn">
									<button class="btn btn-default" type="button">
										<i class="fa fa-search"></i>
									</button>
								</span>
							</div> <!-- /input-group -->
						</li>
						<li><a href="/"><i class="fa fa-dashboard fa-fw"></i>
								Dashboard</a></li>
						<li><a href="#"><i class="fa  fa-bank fa-fw"></i> 资产管理<span
								class="fa arrow"></span></a>
							<ul class="nav nav-second-level">
								<li><a href="/assets_config">基础配置</a></li>
								<li><a href="/assets_add">添加资产</a></li>
								<li><a href="/assets_list">资产列表</a></li>
								<li><a href="/assets_search/">资产查询</a></li>
								<li><a href="/assets_log/1/">操作日志</a></li>
							</ul> <!-- /.nav-second-level --></li>
						<li><a href="#"><i class="glyphicon glyphicon-hdd"></i> 代码发布<span
								class="fa arrow"></span></a>
							<ul class="nav nav-second-level">
								<li><a href="/deploy_add">项目配置</a></li>
								<li><a href="/deploy_list">项目列表</a></li>
<!-- 								<li><a href="/deploy_order/1/">部署工单</a></li> -->
								<li><a href="/deploy_log/1/">操作日志</a></li>
							</ul> <!-- /.nav-second-level --></li>
						<li><a href="#"><i class="fa fa-table fa-fw"></i> 任务管理<span
								class="fa arrow"></span></a>
							<ul class="nav nav-second-level">
								<li><a href="/cron_add">添加任务</a></li>
								<li><a href="/cron_config">批量导入</a></li>
								<li><a href="/cron_list/1/">任务列表</a></li>
								<li><a href="/cron_log/1/">操作日志</a></li>
							</ul> <!-- /.nav-second-level --></li>
						<li><a href="#"><i class="fa fa-sitemap fa-fw"></i> 应用部署<span
								class="fa arrow"></span></a>
							<ul class="nav nav-second-level">
								<li><a href="/apps/inventory/">动态资产</a></li>
								<li><a href="/apps/model/">运行模块</a></li>
								<li><a href="#">脚本工具<span class="fa arrow"></span></a>
									<ul class="nav nav-third-level">
										<li><a href="/apps/script/online/">在线添加</a></li>
										<li><a href="/apps/script/list/">脚本列表</a></li>
									</ul></li>
								<li><a href="#">剧本配置<span class="fa arrow"></span></a>
									<ul class="nav nav-third-level">										
										<li><a href="/apps/playbook/upload/">上传剧本</a></li>
										<li><a href="/apps/playbook/online/">在线编辑</a></li>
										<li><a href="/apps/">剧本列表</a></li>
									</ul> <!-- /.nav-third-level --></li>
								<li><a href="/apps/log/">操作日志</a></li>
							</ul> <!-- /.nav-second-level --></li>
						<li><a href="#"><i class="fa fa-database fa-fw"></i> 数据管理<span
								class="fa arrow"></span></a>
							<ul class="nav nav-second-level">
								<li><a href="#">MySQL<span class="fa arrow"></span></a>
									<ul class="nav nav-third-level">
										<li><a href="/db/config/">基础配置</a></li>
										<li><a href="/db/sql/ops/">管理入口</a></li>											
									</ul>
								</li>														
								<li><a href="/db/sql/logs/1/">操作日志</a></li>
							</ul> <!-- /.nav-second-level --></li>							
						{% if user.is_superuser %}
						<li><a href="#"><i class="fa fa-tasks fa-fw"></i> 任务调度<span
								class="fa arrow"></span></a>
							<ul class="nav nav-second-level">
								<li><a href="/task_model/">调度类型</a></li>
								<li><a href="/task_view/">运行日志</a></li>
							</ul> <!-- /.nav-second-level --></li>
						{% endif %}
						<li><a href="#"><i class="fa fa-bookmark fa-fw"></i> 运维知识<span
								class="fa arrow"></span></a>
							<ul class="nav nav-second-level">
								<li><a href="/wiki/add/">新建文档</a></li>
								<li><a href="/wiki/index/">文档列表</a></li>
							</ul> <!-- /.nav-second-level --></li>	
						<li><a href="#"><i class="fa  fa-ticket fa-fw"></i> 工单系统<span
								class="fa arrow"></span></a>
							<ul class="nav nav-second-level">
								<li><a href="#">工单申请<span class="fa arrow"></span></a>
									<ul class="nav nav-third-level">
										<li><a href="/order/deploy/apply/">代码部署</a></li>
										<li><a href="/order/sql/apply/">上线SQL</a></li>
										<li><a href="/order/file/upload/list/1/">文件分发</a></li>
										<li><a href="/order/file/download/list/1/">文件下载</a></li>
									</ul></li>
								<li><a href="/order/list/1/">工单列表</a></li>
								<li><a href="/order/search/">工单查询</a></li>
							</ul> <!-- /.nav-second-level --></li>													
						<li><a href="/config"><i class="fa fa-wrench fa-fw"></i>
								全局配置</a></li>
						<li><a href="#"><i class="fa fa-group "></i> 用户中心<span
								class="fa arrow"></span></a>
							<ul class="nav nav-second-level">
								<li><a href="/users/manage">用户管理</a></li>
								<li><a href="/user/center/">用户配置</a></li>
								<li><a href="/logout">退出</a></li>
							</ul> <!-- /.nav-second-level --></li>
					</ul>
				</div>
				<!-- /.sidebar-collapse -->
			</div>
			<!-- /.navbar-static-side -->
		</nav>
		{% block page-content %}
		<div id="page-wrapper">

			<div class="row">
				<div class="col-lg-12">
					<h1 class="page-header">Dashboard</h1>
				</div>
				<!-- /.col-lg-12 -->
			</div>
			<!-- /.row -->
			<div class="row">
				<div class="col-lg-3 col-md-6">
					<div class="panel panel-primary">
						<div class="panel-heading">
							<div class="row">
								<div class="col-xs-3">
									<i class="fa fa-database fa-5x"></i>
								</div>
								<div class="col-xs-9 text-right">
									<div class="huge">{{projectTotal.assets}}</div>
									<div>设备资产</div>
								</div>
							</div>
						</div>
						<a href="/assets_list">
							<div class="panel-footer">
								<span class="pull-left">查看所有</span> <span class="pull-right"><i
									class="fa fa-arrow-circle-right"></i></span>
								<div class="clearfix"></div>
							</div>
						</a>
					</div>
				</div>
				<div class="col-lg-3 col-md-6">
					<div class="panel panel-green">
						<div class="panel-heading">
							<div class="row">
								<div class="col-xs-3">
									<i class="fa fa-github-alt fa-5x"></i>
								</div>
								<div class="col-xs-9 text-right">
									<div class="huge">{{projectTotal.project}}</div>
									<div>部署项目</div>
								</div>
							</div>
						</div>
						<a href="/deploy_list/">
							<div class="panel-footer">
								<span class="pull-left">查看所有</span> <span class="pull-right"><i
									class="fa fa-arrow-circle-right"></i></span>
								<div class="clearfix"></div>
							</div>
						</a>
					</div>
				</div>
				<div class="col-lg-3 col-md-6">
					<div class="panel panel-yellow">
						<div class="panel-heading">
							<div class="row">
								<div class="col-xs-3">
									<i class="fa fa-clock-o fa-5x"></i>
								</div>
								<div class="col-xs-9 text-right">
									<div class="huge">{{projectTotal.cron}}</div>
									<div>计划任务</div>
								</div>
							</div>
						</div>
						<a href="/cron_list/1/">
							<div class="panel-footer">
								<span class="pull-left">查看所有</span> <span class="pull-right"><i
									class="fa fa-arrow-circle-right"></i></span>
								<div class="clearfix"></div>
							</div>
						</a>
					</div>
				</div>
				<div class="col-lg-3 col-md-6">
					<div class="panel panel-red">
						<div class="panel-heading">
							<div class="row">
								<div class="col-xs-3">
									<i class="fa fa-tasks  fa-5x"></i>
								</div>
								<div class="col-xs-9 text-right">
									<div class="huge">{{projectTotal.playbook}}</div>
									<div>PlayBook</div>
								</div>
							</div>
						</div>
						<a href="/apps/">
							<div class="panel-footer">
								<span class="pull-left">查看所有</span> <span class="pull-right"><i
									class="fa fa-arrow-circle-right"></i></span>
								<div class="clearfix"></div>
							</div>
						</a>
					</div>
				</div>
			</div>
			<!-- /.row -->
			<div class="row">
				<div class="col-lg-8">
					<div class="panel panel-default">
						<div class="panel-heading">
							<i class="fa fa-bar-chart-o fa-fw"></i> 用户代码部署统计
							<div class="pull-right">
								<div class="btn-group">
									<!--                                     <button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown"> -->
									<!--                                         Actions -->
									<!--                                         <span class="caret"></span> -->
									<!--                                     </button> -->
									<!--                                     <ul class="dropdown-menu pull-right" role="menu"> -->
									<!--                                         <li><a href="#">Action</a> -->
									<!--                                         </li> -->
									<!--                                         <li><a href="#">Another action</a> -->
									<!--                                         </li> -->
									<!--                                         <li><a href="#">Something else here</a> -->
									<!--                                         </li> -->
									<!--                                         <li class="divider"></li> -->
									<!--                                         <li><a href="#">Separated link</a> -->
									<!--                                         </li> -->
									<!--                                     </ul> -->
								</div>
							</div>
						</div>
						<!-- /.panel-heading -->
						<div class="panel-body">
							<div id="morris-area-chart" style="width: 100%; height: 400px"></div>
						</div>
						<!-- /.panel-body -->
					</div>
					<!-- /.panel -->
					<div class="panel panel-default">
						<div class="panel-heading">
							<i class="fa fa-bar-chart-o fa-fw"></i> 月度代码更新统计
							<!--                             <div class="pull-right"> -->
							<!--                                 <div class="btn-group"> -->
							<!--                                     <button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown"> -->
							<!--                                         Actions -->
							<!--                                         <span class="caret"></span> -->
							<!--                                     </button> -->
							<!--                                     <ul class="dropdown-menu pull-right" role="menu"> -->
							<!--                                         <li><a href="#">Action</a> -->
							<!--                                         </li> -->
							<!--                                         <li><a href="#">Another action</a> -->
							<!--                                         </li> -->
							<!--                                         <li><a href="#">Something else here</a> -->
							<!--                                         </li> -->
							<!--                                         <li class="divider"></li> -->
							<!--                                         <li><a href="#">Separated link</a> -->
							<!--                                         </li> -->
							<!--                                     </ul> -->
							<!--                                 </div> -->
							<!--                             </div> -->
						</div>
						<!-- /.panel-heading -->
						<div class="panel-body">
							<div class="row">
								<div class="col-lg-4">
									<div class="table-responsive">
										<table class="table table-bordered table-hover table-striped">
											<thead>
												<tr>
													<th>#</th>
													<th class="text-center">用户</th>
													<th class="text-center">总次数</th>
												</tr>
											</thead>
											<tbody>
												{% for ds in allDeployList %}
												<tr>
													<td>{{ forloop.counter }}</td>
													<td class="text-center">{{ ds.user }}</td>
													<td class="text-center">{{ ds.count }}</td>
												</tr>
												{% endfor %}
											</tbody>
										</table>
									</div>
									<!-- /.table-responsive -->
								</div>
								<!-- /.col-lg-4 (nested) -->
								<div class="col-lg-8">
									<div id="morris-bar-chart"></div>
								</div>
								<!-- /.col-lg-8 (nested) -->
							</div>
							<!-- /.row -->
						</div>
						<!-- /.panel-body -->
					</div>
					<!-- /.panel -->
					<div class="panel panel-default">
						<div class="panel-heading">
							<i class="fa fa-clock-o fa-fw"></i> 更新时间轴
						</div>
						<!-- /.panel-heading -->
						<div class="panel-body">
							<ul class="timeline">
								{% for ds in orderNotice %}
								 {% if ds.order_status == 8 %}
								<li>
									<div class="timeline-badge success">
										<i class="fa fa-check "></i>
									</div>
									<div class="timeline-panel">
										<div class="timeline-heading">
											<h4 class="timeline-title"><a href="{{ds.order_url}}">{{ ds.order_subject }}</a></h4>
											<p>
												<small class="text-muted"><i class="fa fa-clock-o"></i>
													{{ ds.modify_time }}</small>
											</p>
										</div>
										<div class="timeline-body">
											<p><strong>申请人：</strong>{{ ds.order_user }}</p>
											<p><strong>执行人：</strong>{{ ds.order_executor }}</p>
												{% if ds.order_type == 1 %}
													<p><strong>工单类型：</strong><code>代码更新</code></p>
												{% elif ds.order_type == 2 %}
													<p><strong>工单类型：</strong><code>文件分发</code></p>
												{% elif ds.order_type == 0 %}
													<p><strong>工单类型：</strong><code>SQL更新</code></p>
												{% elif ds.order_type == 3 %}
													<p><strong>工单类型：</strong><code>文件下载</code></p>											
												{% endif %}	
											<p><strong>工单内容：</strong>{{ ds.order_content }}</p>											
										</div>
									</div>
								</li> {% elif ds.order_status == 7 or ds.order_status == 9 %}
								<li class="timeline-inverted">
									<div class="timeline-badge danger">
										<i class="fa fa-bomb"></i>
									</div>
									<div class="timeline-panel">
										<div class="timeline-heading">
											<h4 class="timeline-title"><a href="{{ds.order_url}}">{{ ds.order_subject }}</a></h4>
											<p>
												<small class="text-muted"><i class="fa fa-clock-o"></i>
													{{ ds.modify_time }}</small>
										</div>
										<div class="timeline-body">
											<p><strong>申请人：</strong>{{ ds.order_user }}</p>
											<p><strong>执行人：</strong>{{ ds.order_executor }}</p>
												{% if ds.order_type == 1 %}
													<p><strong>工单类型：</strong><code>代码更新</code></p>
												{% elif ds.order_type == 2 %}
													<p><strong>工单类型：</strong><code>文件分发</code></p>
												{% elif ds.order_type == 0 %}
													<p><strong>工单类型：</strong><code>SQL更新</code></p>
												{% elif ds.order_type == 3 %}
													<p><strong>工单类型：</strong><code>文件下载</code></p>											
												{% endif %}	
											<p><strong>工单内容：</strong>{{ ds.order_content }}</p>
										</div>
									</div>
								</li> 
								{% else %}
									<li class="timeline-inverted">
										<div class="timeline-badge warning">
											<i class="fa fa-credit-card"></i>
										</div>
										<div class="timeline-panel">
											<div class="timeline-heading">
												<h4 class="timeline-title"><a href="{{ds.order_url}}">{{ ds.order_subject }}</a></h4>
												<p>
													<small class="text-muted"><i class="fa fa-clock-o"></i>
														{{ ds.modify_time }}</small>
											</div>
											<div class="timeline-body">
												<p><strong>申请人：</strong>{{ ds.order_user }}</p>												
												<p><strong>执行人：</strong>{{ ds.order_executor }}</p>
												{% if ds.order_type == 1 %}
													<p><strong>工单类型：</strong><code>代码更新</code></p>
												{% elif ds.order_type == 2 %}
													<p><strong>工单类型：</strong><code>文件分发</code></p>
												{% elif ds.order_type == 0 %}
													<p><strong>工单类型：</strong><code>SQL更新</code></p>
												{% elif ds.order_type == 3 %}
													<p><strong>工单类型：</strong><code>文件下载</code></p>											
												{% endif %}	
												<p><strong>工单内容：</strong>{{ ds.order_content }}</p>
											</div>
										</div>
									</li> 									
								{% endif %} 
								{% endfor %}
							</ul>
						</div>
						<!-- /.panel-body -->
					</div>				
					<!-- /.panel -->
				</div>
				<!-- /.col-lg-8 -->
				<div class="col-lg-4">
					<div class="panel panel-default">
						<div class="panel-heading">
							<i class="fa fa-bar-chart-o fa-fw"></i> 数据统计
						</div>
						<div class="panel-body">
							<div id="morris-donut-chart"></div>
							<!--                             <a href="#" class="btn btn-default btn-block">View Details</a> -->
						</div>
						<!-- /.panel-body -->
					</div>
					<div class="panel panel-default">
						<div class="panel-heading">
							<i class="fa fa-bell fa-fw"></i> 设备资产更新通知
						</div>
						<!-- /.panel-heading -->
						<div class="panel-body">
							<div class="list-group">

								{% for ds in assetsLog %} {% if ds.assets_type == 'server' %} <a
									href="/assets_view/{{ds.assets_id}}" class="list-group-item">
									<i class="fa  fa-windows fa-fw"></i>{{ds.assets_user}}
									{{ds.assets_content}} <span class="pull-right text-muted small"><em>{{ds.create_time}}</em>
								</span>
								</a> {% elif ds.assets_type == 'net' %} <a
									href="/assets_view/{{ds.assets_id}}" class="list-group-item">
									<i class="fa   fa-paper-plane-o  fa-fw"></i>{{ds.assets_user}}
									{{ds.assets_content}} <span class="pull-right text-muted small"><em>{{ds.create_time}}</em>
								</span>
								</a> {% else %} <a href="#" class="list-group-item"> <i
									class="fa fa-comments-o fa-fw"></i>{{ds.assets_user}}
									{{ds.assets_content}} <span class="pull-right text-muted small"><em>{{ds.create_time}}</em>
								</span>
								</a> {% endif %} {% endfor %}

							</div>
							<!-- /.list-group -->
							<a href="/assets_log/1/" class="btn btn-default btn-block">查看操作记录</a>
						</div>
						<!-- /.panel-body -->
					</div>
					<!-- /.panel -->

					<!-- /.panel -->

					<!-- /.panel .chat-panel -->
				</div>
<!-- 				<div class="col-lg-4">
                    <div class="chat-panel panel panel-default">
                        <div class="panel-heading">
                            <i class="fa fa-comments fa-fw"></i> ChatOps
                        </div>
                        /.panel-heading
                        <div class="panel-body">
                            <ul class="chat" id="chatTalk">
                            </ul>
                        </div>
                        /.panel-body
                        <div class="panel-footer">
                            <div class="input-group">
                                <input id="inputChatRoom" type="text" class="form-control input-sm" placeholder="Type your message here..." />
                                <span class="input-group-btn">
                                    <button class="btn btn-warning btn-sm" id="btnChatRoom">
                                        Send
                                    </button>
                                </span>
                            </div>
                        </div>
                        /.panel-footer
                    </div>					
				</div> -->
				<!-- /.col-lg-4 -->
			</div>
			<!-- /.row -->
		</div>
		<!-- /#page-wrapper -->

	</div>
	<!-- /#wrapper -->
	
	<script type="text/javascript"> 
	var myChart = echarts.init(document.getElementById('morris-area-chart'));
	option = {
		    title : {
		        text: '最近7天更新统计',
		        subtext: '更新统计'
		    },
		    tooltip : {
		        trigger: 'axis'
		    },
		    legend: {
		        data:[
		              {% for ds in userList %}
		              		'{{ds}}',
		              {% endfor %}
		              ]
		    },
		    toolbox: {
		        show : true,
		        feature : {
		            mark : {show: true},
		            dataView : {show: true, readOnly: false},
		            magicType : {show: true, type: ['line', 'bar']},
		            restore : {show: true},
		            saveAsImage : {show: true}
		        }
		    },
		    calculable : true,
		    xAxis : [
		        {
		            type : 'category',
		            data : [
		                    {% for ds in dateList %}
		                    	'{{ds}}',
		                    {% endfor %}
		                    ]
		        }
		    ],
		    yAxis : [
		        {
		            type : 'value'
		        }
		    ],
		    series : [
		              {% for ds in orderList %}
		              	{% for k,v in ds.items %}
				  	        {
					            name:'{{k}}',
					            type:'bar',
					            data:[
					                  {% for ds in v %}
					                  	{{ds}},
					                  {% endfor %}
					                  ],
					            markPoint : {
					                data : [
					                    {type : 'max', name: '最大值'},
					                    {type : 'min', name: '最小值'}
					                ]
					            },
					            markLine : {
					                data : [
					                    {type : 'average', name: '平均值'}
					                ]
					            }
					        },	   
				        {% endfor %}
		              {% endfor %}
		    ]
		};
	myChart.setOption(option);
	
	$(function() {
	
	
	    Morris.Donut({
	        element: 'morris-donut-chart',
	        data: [{
	            label: "项目",
	            value: {{projectTotal.project}}
	        }, {
	            label: "任务",
	            value: {{projectTotal.cron}}
	        },{
	            label: "剧本",
	            value: {{projectTotal.playbook}}
	        },{
	            label: "资产",
	            value: {{projectTotal.assets}}
	        }],
	        resize: true
	    });
	
	    Morris.Bar({
	        element: 'morris-bar-chart',
	        data: [
	               {% for ds in monthDataList %}
	               		{
		               		{% for k,v in ds.items %}
								{% if k == 'date' %}
									{{k}}:'{{v}}',
								{% else %}
									{{k}}:{{v}},
		                    	{% endif %}
		               		{% endfor %}
	               		},
	               {% endfor %}
			],
	        xkey: 'date',
	        ykeys: [
	                {% for ds in userList %}
	                	'{{ds}}',
	                {% endfor %}
	                ],
	        labels: [
	                 {% for ds in userList %}
	             		'{{ds}}',
	             	{% endfor %}
	             	],
	        hideHover: 'auto',
	        resize: true
	    });
	    
	});



</script>
{% endblock %}			
</body>

</html>